<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		
		<!-- 添加后展示图片 -->
		<meta name="referrer" content="no-referrer">
		
	  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>Bilibili爬虫系统</title>
		<!-- <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		
 
		<script type="text/javascript" src="./js/echarts.js"></script>
		<script type="text/javascript" src="./js/jquery-3.4.0.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="./js/commentjs.js"></script>
		<script type="text/javascript" src="../js/index.js"></script>
	</head>
	
	<body>
		<div class="header">
			<h1 class="header-title">Bilibili爬虫系统</h1>
		</div>
		<div class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-l-t">
							<div class="title">结果分析</div>
							<div id="line" style="overflow:scroll;width: 95%;height: 78%;color: white; font-size: 15px; margin:10px 10px 10px 15px; line-height: 28px;">
								根据爬取结果，得到如下几条结论/推测：<br />
								1. &nbsp;由 <button class="btn-tot">等级比例</button> 可知，该视频受众以 <button id="line-btn1" class="btn-tot btn-lv5">lv5</button> 用户为主，<br />
								推测该UP主粉丝数量 <button id="line-btn2" class="btn-tot">较高</button> ，粉丝活跃度 <button id="line-btn3" class="btn-tot">较高</button> 。<br />
								2. &nbsp;由 <button class="btn-tot">性别比例</button> 可知，该视频受众以 <button id="line-btn4" class="btn-tot btn-boy">男性</button> 用户为主，<br />
								推测视频类型为 <button id="line-btn5" class="btn-tot">游戏</button> <button id="line-btn6" class="btn-tot">搞笑</button> <button id="line-btn7" class="btn-tot">军事</button> 等 。<br />
								3. &nbsp;由 <button class="btn-tot">弹幕发送时间</button> 可知，该视频观看时间 <button id="line-btn8" class="btn-tot btn-fs">较为分散</button> ，<br />
								推测该视频时长 <button id="line-btn9" class="btn-tot">较长</button> ，重复观看率 <button id="line-btn10" class="btn-tot">较高</button> 。<br />
								
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel xpanel-l-b">
							<div class="title">等级比例</div>
							<div id="level" style="height: 400px;"></div>
						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-75">
						<div class="xpanel no-bg">
							<div style="width: 100%; height: 100%;padding-top: 40px;">
								<div id="picTil" style="font-size: 18px; color: aliceblue;"></div>
								<div style="width: 100%;height: 400px; padding-top: 10px;">
									<img id="pic" style="width: 100%;height: 100%; border-radius: 10px;" src="" alt="1">
								</div>
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-c-b">
							<div class="title title-long">详情</div>
							<div id="total">
								<div style="float: left; width: 25%;font-size: 16px; padding-top: 20px;";>
									<div class="view"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
								  <div style="padding-top: 10px; font-size: 14px;color:#A6A6A6;">浏览量</div>
								</div>
								<div style="float: left; width: 25%";>
									<div class="likes"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
									<div  style="font-size: 14px;color:#A6A6A6;">点赞</div>
									<div style="border-bottom: 1px solid rgba(255,255,255,.1);margin-bottom: 4px;"></div>
									<div class="coin"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
									<div  style="font-size: 14px;color:#A6A6A6;">投币</div>
								</div>
								<div style="float: left; width: 25%";>
									<div class="favorite"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
									<div  style="font-size: 14px;color:#A6A6A6;">收藏</div>
									<div style="border-bottom: 1px solid rgba(255,255,255,.1);margin-bottom: 4px;"></div>
									<div class="reply"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
									<div  style="font-size: 14px;color:#A6A6A6;">回复</div>
								</div>
								<div style="float: left; width: 25%";>
									<div class="share" style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
									<div  style="font-size: 14px;color:#A6A6A6;">分享</div>
									<div style="border-bottom: 1px solid rgba(255,255,255,.1);margin-bottom: 4px;"></div>
									<div class="danmu"  style="color: #c5ccff;font-size: 20px;font-weight: bolder;"></div>
								  <div style="font-size: 14px;color:#A6A6A6;">弹幕</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-r-t">
							<div class="title">弹幕发送日期</div>
							<div id="line2" style="height: 100%; width: 100%; padding-left: 20px; padding-top: 5px;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30">
						<div class="xpanel xpanel-r-m">
							<div class="title">性别比例</div>
							<div id="sexnum" style="height: 150px; width: auto;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-r-b">
							<div class="title">
								
								<span>评论</span>
								<button class="btn btn-primary" id="btn-r-b">切换</button>
							</div>
							<div id="comment" style="width: 100%;height: 82%; padding-right: 50px;">
								<ul class="commentD"></ul>
								<div id="child2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>